<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../icon/iconfont.css" />
    <style>
        header{
          background-color: #fff;
          width: 100%;
          position: fixed;
          padding: 1.6rem 0.8rem 0.5rem 0.8rem;
        }
        header span:nth-of-type(1){
          font-size: 1rem
        }
        header span:nth-of-type(2){
          font-size: 1rem;
        }
        .Isnone{
          display: none;
          text-align: center;
          color:#D2984D;
          font-size: 16px;
          padding-top: 8rem;
          width:100%;
        }
        span.itemspan{
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 10rem;
        }
        .dots{
          position: absolute;
          width: .5rem;
          height: .5rem;
          background: red;
          border-radius: 50%;
          top: 4px;
          left: -7px;
        }
    </style>
</head>

<body>
    <header>
      <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
      <span>消息列表</span>
    </header>
    <div class="main-box" style="padding: 4rem 0.8rem 0 0.8rem;">
        <!-- <div class="aui-info">
            <div class="aui-info-item">
                <img src="../../../image/demo2.png" style="width:1.5rem" class="aui-img-round" /><span class="aui-margin-l-5">AUI</span>
                </div>
            <div class="aui-info-item">2015-07-13 22:31</div>
        </div> -->
    </div>
    <div class="Isnone">暂无消息！</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/dns.js"></script>
<script type="text/javascript" src="../../../lib/zepto.js"></script>
<script type="text/javascript" src="../../../lib/artTemplate/template.js"></script>
<script id="messageList" type="text/html">
  {{each data as value index}}
    <div style="border-bottom:1px solid #EEE; padding:.5rem 0;" class="aui-info" data-id="{{data[index].id.id}}" onclick="getDesc(this);">
        <div class="aui-info-item" style="position: relative;">
            {{if data[index].id.is_read == '0' }}<em class="dots"></em>{{/if}}
            <span class="aui-margin-l-5 itemspan">{{data[index].title}}</span>
        </div>
        <div class="aui-info-item">{{data[index].create_time}}</div>
    </div>
  {{/each}}
</script>
<script type="text/javascript">
    apiready = function() {

    };

    $(document).ready(function(){
      //获取消息列表
      getmessageList (1,5);

    });

    //去详情--走你
    function getDesc (e) {
      var id = $(e).attr('data-id');
      $(e).find('.dots').hide();
      api.openWin({
          name: 'messagedesc',
          url: './messagedesc.html',
          allowEdit:true,
          pageParam: {'pageid':id} //页面代参数
      });
    };

    function getmessageList (page,limit) {
      //console.log(localStorage.getItem('token'));
      $.ajax({
         url: dns + 'message/list',
         type: 'GET',
         data: {'page':page,'limit':limit},
         beforeSend: function(request) {
             request.setRequestHeader("token", localStorage.getItem('token'));
             },
         success: function (res) {
           console.log(JSON.stringify(res));
           if(res.data){
             $('.main-box').show();
             $('.Isnone').hide();
             var html = template('messageList', {data: res.data});
             $('.main-box').html(html);
           }else{
             $('.main-box').hide();
             $('.Isnone').show();
           }
         },
        });
    }
</script>

</html>
